<template>
  <div id="outer">
    <el-card>
      <div id="title">登录页</div>
      <el-divider></el-divider>
      <el-form>
        <el-form-item >
          <el-input type="text" placeholder="请输入账号" v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="password" placeholder="请输入密码" v-model="formData.password"></el-input>
        </el-form-item>
        <el-form-item prop="code" label>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-input v-model="formData.code" placeholder="请输入验证码"></el-input>
          </el-col>
          <el-col :span="8">
            <img v-on:click="getImage" :src="imgSrc" class="codeImg" />
          </el-col>
        </el-row>
      </el-form-item>
        <el-button type="primary" style="width: 100%" @click="login">登录</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {login} from '@/api/user'
  export default {
    name: "Login",
    data(){
      return {
        formData: {
            username: "",
            password: "",
            code: ''
        },
        imgSrc: ''
      }
    },
    created() {
      this.getImage();
    },
    methods: {
      //获取验证码
      getImage() {
        console.log(111);
        let res =
          "http://localhost:8080/api/admin/image?t=" + new Date().getTime();
        this.imgSrc = res;
      },
			login(){
        login(this.formData).then(res => {
          //保存token到vuex
          this.$store.state.token = res.data.token;
          //保存token到
          window.localStorage.setItem("token", res.data.token);
          //保存管理员信息到vuex
          this.$store.state.admin = res.data.admin
          //提示成功登陆并跳转
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.$router.push('/home');
            }
          })
        })
      }
    }
  }
</script>

<style scoped>
  #title{
    font-size: 25px;
    font-weight: bold;
    color: #20222A;
    text-align: center;
  }
  #outer{
    width: 100vw;
    height: 100vh;
    background-color: #20222A;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .el-card{
    width: 400px;
    height: 350px;
  }
  .codeImg {
    width: 100%;
    cursor: pointer;
  }
</style>
